<script src="/res/third/animate/wow.min.js" type="text/javascript"></script>
<style type="text/css">
    .list-group.groupdiv{
        float: left;
        width: 200px;
        margin-right: 15px;
    }
    .list-group.groupdiv a{
        display: block;
        padding: 5px;
        border-bottom: 1px solid gainsboro;
    }
    a.list-group-item-success{
        /*color:#3c763d;*/
        /*background-color:#dff0d8;*/
    }


    a.list-group-item.active{
        color: #707070;
    	background-color: #e1f4f9;
    	border-color: #e1f4f9;
    }
</style>
<script>
$(function(){

	$(".groupdiv a").hover(function(){
		
		//当前attid
		var attid =$(this).attr("attid");
		
		
		var index = $(this).parent().attr("attindex");
		$("#step"+index).find(".active").removeClass("active");
		$(this).addClass("active");
		
		
		//下级所有先隐藏
		
		var next = parseInt(index);
		var i =1;
		while($("#step"+(next+i)).length>0){
			$("#step"+(next+i)).find("a").hide();;
			i++;
		}
	 
	 	//子集显示
	 	$("#step"+(next+1)).find("._"+attid).show();
	})
	
	
	var x="pulse";
	$(".catetype3").hover(function(){
	 	$(this).removeClass(x).removeClass("animated").addClass(x + ' animated').bind('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
	  	});
	},function(){
		$(this).removeClass(x).removeClass("animated");
	});
	
	
	//点击选择
	$(".catetype3").on("click",function(){
		var name = $(this).text();
		var id = $(this).attr("attid");
		
		var atttop = $(this).attr("atttop");

		var $first = $('#_category_wrap a[attid=' + atttop + ']');
		var $second = $('#_category_wrap a[attid=' + $(this).attr("attpid") + ']');

		var data = {fid : atttop, fname : $first.text(), sid : $(this).attr("attpid"), sname : $second.text(), tid : id, tname : name};

        $(document).unbind("keyup");
		${callback!}(name, id, atttop, data);
	});




	
	
	//选中默认的
	var current ="${current}";
	//如果是多个,就没有默认选中
	[#if !mulitys?? ]
	addChecked(current);
	[/#if]
});



function changeDiv(obj){
    if($(".mulitygroup").is(":visible")){
        $(".mulitygroup").hide();
        $(".groupdiv").show();
        $("#sosuo").show();
        $(obj).text("切换至:从现有匹配中选择");

    }else{
        $(".mulitygroup").show();
        $(".groupdiv").hide();
        $("#sosuo").hide();
        $(obj).text("切换至:重新选择");

    }
    return false;
}




function addChecked(current){
	
	if(current!=""){
		var checked = $("a[attid="+current+"]");
		checked.addClass("active");
		var pcheckedid = checked.attr("attpid");
		$("._"+pcheckedid).show();
		addChecked(pcheckedid);
		
	}
}

setTimeout(function () {
    $("#_category_wrap").show();
},50)


//多个匹配的选择
$(".gocallback").click(function(){
    var name = $(this).attr("attname");
    var id = $(this).attr("attid");
    var topid = $(this).attr("atttop");
	${callback!}(name, id, topid);
    return false;
});


//删除
$(".godelete").click(function(){
    //删除该条记录
    var id = $(this).attr("attid");
    $(this).parent().remove();
	layer.post({
        url:"/category/del_repository",
        data:{repositoryid:parseInt(id)},
        success:function(data){
            if(data.success){
				layer.msgShort("删除成功");
            }else{
				layer.msgShort("删除失败")
            }
        }
    });
    return false;
});

function searchFor(){

    $(".active").removeClass("active");
    var searchVal = $("#searchval").val();
    var search = searchVal.trim().replace(/\s+/g,".*");
    var searchReg = ".*"+search+".*";
    var reg = new RegExp(searchReg);
    var attid ="";

    $("#step3").find("a").each(function () {
        var atext = $(this).text().trim();
        if(reg.test(atext)){
            attid = $(this).attr("attid");
            return false;
        };
    });

    if(attid==""){
        $("#step2").find("a").each(function () {
            var atext = $(this).text().trim();
            if(reg.test(atext)){
                attid = $(this).attr("attid");
                return false;
            };
        })
    }


    if(attid==""){
        $("#step1").find("a").each(function () {
            var atext = $(this).text().trim();
            if(reg.test(atext)){
                attid = $(this).attr("attid");
                return false;
            };
        })
    }

    addChecked(attid);

}




var pretime =new Date().getTime();

$(document).keyup(function(event){
    if(event.keyCode ==13){
        var nowtime = new Date().getTime();;
        if((nowtime-1000) > pretime){
            searchFor();
        }else{
            $(".catetype3.active").click();
        }
        pretime = nowtime;
    }
});
$("#searchval").focus();



</script>

<div id="_category_wrap" style="overflow: hidden;display: none;" >

[#if mulitys?? ]
<div  >
    <div>
        <a href="#" onclick="return changeDiv(this)" class="btn btn-default" >切换至:重新选择</a>
    </div>
    <ul id="step0" class="list-group mulitygroup" attindex="0" >
		[#list mulitys as mulity ]
            <li  class="list-group-item list-group-item-success" >
                <a href="#"   class="list-group-item-success  gocallback" style="cursor: pointer;"  attname="${thirdCatName[mulity_index]}"  atttop="${firstCatids[mulity_index]}"  attid="${thirdCatids[mulity_index]}" >${mulity}</a>
                [#if recats?? ]<a href="#"   class="list-group-item-info  godelete"    attid="${recats[mulity_index]}"       style="float: right;margin-left: 5px;cursor: pointer;"    >删除</a>[/#if]
            </li>
		[/#list]
    </ul>
</div>
[/#if]


[#if hasearch??]
<div id="sosuo" [#if mulitys?? ] style="display: none;"[/#if] >
	<div class="input-group" style="width: 238px;" >
		<input type="text"  id="searchval" class="form-control" placeholder="类目名称"  >
		<span class="input-group-btn">
		<button class="btn btn-default" type="button" onclick="searchFor()"  >搜索</button>
	</span>
	</div>
	<p style="color: red;">
		*多个关键字检索以空格符分隔, Enter键搜索, 连续Enter键确定选中
		<br>
	</p>
</div>
[/#if]




[#if categorys?? && categorys?size!=0]
	<div id="step1" class="list-group groupdiv" attindex="1"  [#if mulitys?? ]style="display: none;"[/#if] >
	[#list categorys as category ]
		[#if category.cateType==3]
			<a  attid="${category.id}" attpid="" atttop="${category.id}"  style="cursor: pointer;"  class="list-group-item list-group-item-success catetype3">${category.name}</a>
		[#else]
			<a  attid="${category.id}" attpid="" style="cursor: default;" class="list-group-item list-group-item-success">${category.name}</a>
		[/#if]
	[/#list]
	</div>
	
	
	<div id="step2" class="list-group groupdiv"  attindex="2">
		[#list categorys as category ]
			[#if category.childenCategorys?? && category.childenCategorys?size!=0 ]
				[#list category.childenCategorys as ccategory ]
					[#if ccategory.cateType==3]
					<a   style="display: none;cursor: pointer;"  atttop="${category.id}" attid="${ccategory.id}"  attpid="${category.id}" class="list-group-item list-group-item-info _${category.id} catetype3">${ccategory.name}</a>
					[#else]
					<a   style="display: none;cursor: default;"  attid="${ccategory.id}"  attpid="${category.id}" class="list-group-item list-group-item-info _${category.id}">${ccategory.name}</a>
					[/#if]
				[/#list]	
			[/#if]	
		[/#list]
	</div>
	
	
	
	<div id="step3" class="list-group groupdiv" attindex="3"> 
		[#list categorys as category ]
			[#if category.childenCategorys?? && category.childenCategorys?size!=0 ]
				[#list category.childenCategorys as ccategory ]
					[#if ccategory.childenCategorys?? && ccategory.childenCategorys?size!=0 ]
						[#list ccategory.childenCategorys as cccategory ]
							[#if cccategory.cateType==3]
								<a  style="display: none;cursor: pointer;"  atttop="${category.id}"  attid="${cccategory.id}" attpid="${ccategory.id}" class="list-group-item list-group-item-danger _${ccategory.id} catetype3">${cccategory.name}</a>
							[#else]
								<a  style="display: none;cursor: default;" attid="${cccategory.id}" attpid="${ccategory.id}" class="list-group-item list-group-item-danger _${ccategory.id}">${cccategory.name}</a>
							[/#if]
						[/#list]
					[/#if]
				[/#list]	
			[/#if]	
		[/#list]
	</div>
	
	[#--
	<div id="step4" class="list-group groupdiv" attindex="4">
		[#list categorys as category ]
			[#if category.childenCategorys?? && category.childenCategorys?size!=0 ]
				[#list category.childenCategorys as ccategory ]
					[#if ccategory.childenCategorys?? && ccategory.childenCategorys?size!=0 ]
						[#list ccategory.childenCategorys as cccategory ]
							[#if cccategory.childenCategorys?? && cccategory.childenCategorys?size!=0 ]
								[#list cccategory.childenCategorys as ccccategory ]
								[#if cccategory.cateType==3]
									<a   style="display: none;cursor: pointer;"  atttop="${category.id}" attid="${ccccategory.id}"  attpid="${cccategory.id}" class="list-group-item list-group-item-danger _${cccategory.id} catetype3">${ccccategory.name}</a>
								[#else]
									<a   style="display: none;cursor: default;"  attid="${ccccategory.id}"  attpid="${cccategory.id}" class="list-group-item list-group-item-danger _${cccategory.id}">${ccccategory.name}</a>
								[/#if]
								[/#list]
							[/#if]
						[/#list]
					[/#if]
				[/#list]	
			[/#if]	
		[/#list]
	</div>
	--]
[/#if]
</div>

